<template>
  <el-card v-show="scene===2">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="sku名称">
        {{ spuName }}
      </el-form-item>
      <el-form-item label="spu名称">
        <el-input v-model="form.skuname" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="form.price" />
      </el-form-item>
      <el-form-item label="重量">
        <el-input v-model="form.weight" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="form.skuDesc" type="textarea" />
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form :inline="true">
          <el-form-item v-for="(item,index) in AttrSaleList" :key="index" :label="item.saleAttrName">
            <el-select v-model="item.value" placeholder="请选择">
              <el-option
                v-for="item1 in item.spuSaleAttrValueList"
                :key="item1.value"
                :label="item1.saleAttrValueName"
                :value="`${item.id}:${item1.id}`"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline="true">
          <el-form-item v-for=" (attr,index) in AttrInfo" :key="index" :label="attr.attrName" style="margin-top: 20px">
            <el-select v-model="attr.value" placeholder="请选择">
              <el-option
                v-for="(attrVlaue,index) in attr.attrValueList"
                :key="index"
                :label="attrVlaue.valueName"
                :value="`${attr.id}:${attrVlaue.id}`"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table
          ref="multipleTable"
          :data="ImgList"
          tooltip-effect="dark"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            label="图片"
            width="360"
          >
            <template slot-scope="scope">
              <img :src="scope.row.imgUrl" style="width:100px;height: 100px">
            </template>
          </el-table-column>
          <el-table-column
            prop="imgName"
            label="名称"
            width="300"
          />
          <el-table-column
            prop="address"
            label="操作"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button v-if="scope.row.isDefult===0" type="primary" @click="isShowDefult(scope.row)">设为默认</el-button>
              <el-button v-if="scope.row.isDefult===1">默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <el-button @click="saveSku">保存</el-button>
    <el-button @click="cacelSku">取消</el-button>
  </el-card>
</template>

<script>
import { reqImgList, reqattrSaleList, reqattrInfo, reqAddsku } from '@/api/spu'
export default {
  name: 'SkuFrom',
  props: ['spuList'],
  data() {
    return {
      scene: 0,
      tableData: [],
      spuName: '',
      id: '',
      // 服务器返回的图片列表
      ImgList: [],
      // 服务器返回的售卖属性的列表
      AttrSaleList: [],
      // 服务器返回的
      AttrInfo: [],
      form: {
        spuname: '',
        skuname: '',
        price: '',
        weight: '',
        skuDesc: '',
        value: '',
        options: [],
        tableData: []
      }

    }
  },
  methods: {
    // 进入页面发请求
    async  getdata() {
      const { category1Id, category2Id, category3Id } = this.spuList
      const result = await Promise.all([reqImgList(this.id), reqattrSaleList(this.id), reqattrInfo(category1Id, category2Id, category3Id)])
      const list = result[0].data
      list.forEach((item) => {
        item.isDefult = 0
      })
      this.ImgList = list
      this.AttrSaleList = result[1].data
      this.AttrInfo = result[2].data
    },
    // 排他思想 当前的设置为默认按钮
    isShowDefult(row) {
      this.ImgList.forEach((item) => {
        item.isDefult = 0
      })
      row.isDefult = 1
    },
    // 收集图片数据
    handleSelectionChange(selection) {
      console.log(selection)
      if (selection.length > 1) {
        selection.forEach((item) => {
          this.selection.spuImgId = item.id
        })
      }
      console.log('图片列表数据', selection)
      this.form.skuImageList = selection
    },
    async saveSku() {
      //
      this.form.category3Id = this.spuList.category3Id
      this.form.id = this.id
      // 整理销售属性
      const arr = []
      this.AttrSaleList.forEach((item) => {
        console.log(item)
        if (item.value) {
          const [saleAttrId, saleAttrValueId] = item.value.split(':')
          const obj = {
            saleAttrId,
            saleAttrValueId
          }
          arr.push(obj)
        }
        this.form.skuSaleAttrValueList = arr
      })
      // 整理skuAttrValueList {attrId: "106", valueId: "176"}
      const skuarr = []
      this.AttrInfo.forEach((item) => {
        if (item.value) {
          //  代表用户选择了
          const [attrId, valueId] = item.value.split(':')
          const obj1 = { attrId, valueId }
          skuarr.push(obj1)
        }
      })
      this.form.skuAttrValueList = skuarr
      const res = await reqAddsku(this.form)
      if (res.code === 200) {
        this.scene = 0
        this.form = {}
        this.$emit('changescene', this.scene)
      } else {
        this.$message.error('请完整填写')
      }
    },
    // 取消的
    cacelSku() {
      this.form = {}
      this.scene = 0
      this.$emit('changescene', this.scene)
    }
  }
}
</script>

<style scoped>

</style>
